<template>
    <div class="layout-side-nav">
        <t-menu theme="light" :value="activeMenu" :collapsed="settingStore.sidebarCollapsed">
            <template #logo>
                <div class="logo-wrapper">
                    <h2 v-show="!settingStore.sidebarCollapsed">{{ title }}</h2>
                    <t-icon name="system-2" v-if="settingStore.sidebarCollapsed" />
                </div>
            </template>
            <template v-for="item in menu" :key="item.path">
                <t-submenu v-if="item.children" :value="item.path">
                    <template #icon>
                        <t-icon :name="item.icon" />
                    </template>
                    <template #title>{{ item.title }}</template>
                    <t-menu-item v-for="child in item.children" :key="child.path" :value="child.path" :to="child.path">
                        {{ child.title }}
                    </t-menu-item>
                </t-submenu>

                <t-menu-item v-else :value="item.path" :to="item.path">
                    <template #icon>
                        <t-icon :name="item.icon" />
                    </template>
                    {{ item.title }}
                </t-menu-item>
            </template>
        </t-menu>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getMenuList } from '@/api/login';
import { useUserStore, useSettingStore } from '@/store';
import { Menu } from '@/types/interface';


const route = useRoute();
const userStore = useUserStore();
const id = userStore.id;
const settingStore = useSettingStore();

const activeMenu = computed(() => route.path);

const menu = ref<Menu[]>([]);
const title = ref('');

const MenuLists = async () => {
    const params = {
        id: id
    }
    try {
        const res = await getMenuList(params);
        menu.value = res.data.menuList;
        title.value = res.data.title;

    } catch (error) {
        console.error('获取菜单列表失败:', error);
    }
}

onMounted(() => {
    MenuLists();
})

</script>

<style scoped>
.layout-side-nav {
    height: 100vh;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.collapse-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 8px;
}
</style>